<template>
	<div class="app">
		<h2>当前car2 为：{{ car2 }}</h2>
		<button @click="changePrice">点我价格 +10</button>
	</div>
</template>

<script setup lang="ts" name="App">
/**
 * 
 *  
 *  https://cn.vuejs.org/api/reactivity-advanced#toraw
 * 
 * 
 * 
 * 
 * 
 * 将一个对象标记为不可被转为代理。返回该对象本身。 markRaw 的使用 
 * https://cn.vuejs.org/api/reactivity-advanced#markraw
 */
import { ref, reactive, readonly, shallowReadonly, toRaw, onMounted, markRaw } from "vue";




// markRaw 标记之后，以后 就不会变成响应式， 将一个对象标记为不可被转为代理。返回该对象本身。
let car = markRaw({
	brand: '奔驰',
	options: {
		color: '红色',
		price: 100
	}
})

// 此时car2 就没有响应式的数据了。
let car2 = reactive(car)

onMounted(() => {
	console.log('car == row_car ? ', car === car2)
	// console.log(car,raw_car)
	console.log(car)
	console.log(car2)
})



function changePrice() {
	car2.options.price += 10
}

</script>

<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 0 5px;
}
</style>